<template>
  <div>
    <div style="padding:10px" class="flex-center-start">
      <h3  style="padding-top:6px">选择语言：</h3>
      <a-select
          placeholder="请筛选语言"
          v-model="language"
          style="width:300px"
          @change="languageChanges"
        >
          <a-select-option :value="1">简体中文</a-select-option>
          <a-select-option :value="2">繁体</a-select-option>
          <a-select-option :value="3">英语</a-select-option>
          <!-- <a-select-option value="">全部</a-select-option> -->
        </a-select>
    </div>
    <div ref="editor"></div>
    <div
      style="
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
      "
    >
      <a-button @click="save()" type="primary"> 保存 </a-button>
    </div>
  </div>
</template>
<script>
import E from "wangeditor-antd";
import api from "@/api/api.js";
import UploadImg from "../../components/uploadImg.vue";
import { quillEditor } from "vue-quill-editor";
import { quillRedefine } from "vue-quill-editor-upload";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

export default {
  name: "editor",
  props: ["get-full-text", "content"], //回调方法
  components: {
    UploadImg,
  },
  mounted() {
    var editor = new E(this.$refs.editor);
    editor.customConfig.customUploadImg = function (files, insert) {
      var formData = new FormData();
      formData.append("files", files[0]);
      api.tinymcePic(formData).then((res) => {
        if ((res.code = 200)) {
          var data = res.result[0];
          insert(data);
        }
      });
    };
    this.editor = editor;
    editor.create();
  },
  data() {
    return {
      railwayId: "",
      type: "2",
      language:1
    };
  },
  methods: {
    save() {
      api
        .saveRailway({
          type: 2,
          railwayId: this.railwayId,
          language:this.language,
          content: this.editor.txt.html(),
        })
        .then((res) => {
          if (res.code == 200) {
            this.$message.success("更新成功");
          }
        });
    },
    getPlan() {
      api
        .getRailwayList({
          type: this.type,
          language:this.language
        })
        .then((res) => {
          console.log(res);
          if (res.code == 200) {
            let data=res.result;
             let content="",railwayId=""
              data.forEach(element => {
                if(element.language==this.language){
                  content=element.content;
                  railwayId=element.railwayId;
                }
              });
              debugger
            this.editor.txt.html(content);
            this.railwayId=railwayId
          }
        });
    },
    languageChanges(values) {
      this.language = values;
      this.getPlan();
    },
  },
  created() {
    this.getPlan();
  },
};
</script>

<style lang="scss" scoped="" type="text/css">
.editable-row-operations a {
  margin-right: 8px;
}
.top-btn {
  padding: 10px;
}
.code-img {
  display: block;
  width: 150px;
}
</style>
